<template>

	<div class="switch">

		<!-- 基本开关、正常尺寸 -->

		<div class="switch-button switch-normal" :class="{'active':status === 1 , 'disabled':disabled}" @click="changeSwitch" v-if="!isSmall">

			<div class="switch-list pull-left" :class="{'active':status === 0}" title="关闭"><span class="switch-open" v-if="status === 1">开</span></div>

			<div class="switch-list pull-right" :class="{'active':status === 1}" title="开启"><span class="switch-close" v-if="status === 0">关</span></div>

		</div>

		<!-- 基本开关、偏小尺寸-->

		<div class="switch-button switch-small" :class="{'active':status === 1 , 'disabled':disabled}" @click="changeSwitch" v-if="isSmall">

			<div class="switch-list pull-left" :class="{'active':status === 0}" title="关闭"></div>

			<div class="switch-list pull-right" :class="{'active':status === 1}" title="开启"></div>

		</div>

	</div>

</template>



<script>
export default {
  props: {
    status: {
      default: 1
    },

    isSmall: {
      default: false
    },

    disabled: {
      default: false
    }
  },

  methods: {
    changeSwitch() {
      var _this = this;

      if (!_this.disabled) {
        var status;

        if (_this.status === 0) {
          status = 1;
        } else {
          status = 0;
        }

        _this.$emit("change", status);
      }
    }
  }
};
</script>



<style>
.switch {
  display: inline-block;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  vertical-align: middle;
}

/* 基本开关 */

.switch-button {
  color: #ffffff;

  background: rgba(0, 0, 0, 0.25);

  display: inline-block;

  cursor: pointer;
}

/* 激活状态 */

.switch-button.active {
  background: #3dbd7d;
}

/* 禁用状态 */

.switch-button.disabled {
  background: #f7f7f7;

  cursor: not-allowed;

  color: #cccccc;
}

/* 正常选项激活状态 */

.switch-button .switch-list.active {
  background: #ffffff;
}

/* 禁用选项激活状态 */

.switch-button.disabled .switch-list.active {
  background: #cccccc;
}

/* 通用尺寸 */

.switch-list {
  transition: background 0.1s;

  -moz-transition: background 0.1s;

  -webkit-transition: background 0.1s;

  -o-transition: background 0.1s;

  transition-timing-function: ease-in;
}

.switch-button .switch-list {
  border-radius: 100%;
}

/* 正常大小 */

.switch-normal {
  width: 42px;

  height: 20px;

  border-radius: 44px;
}

.switch-button.switch-normal .switch-list {
  width: 16px;

  height: 16px;

  line-height: 16px;

  margin: 2px;
}

.switch-button.switch-normal .switch-list span {
  font-size: 12px;
}

.switch-button.switch-normal .switch-list .switch-open {
  margin-left: 6px;
}

.switch-button.switch-normal .switch-list .switch-close {
  margin-right: 6px;
}

/* 小尺寸 */

.switch-small {
  width: 28px;

  height: 14px;

  border-radius: 40px;
}

.switch-small .switch-list {
  width: 12px;

  height: 12px;

  margin: 1px;
}
</style>

